<template>
	<view class="address-book">
		<view class="address-book__body">
			<!-- 滚动页面 -->
			<scroll-view class="address-book" scroll-y="true" :scroll-into-view="move" :scroll-with-animation="true"
				:show-scrollbar="false">
				<Search />
				<view class="address-book__body--header">
					<Option title="新的朋友" @submit="sendNew">
						<template #icon>
							<image src="../../static/imgs/新的朋友.svg" mode="aspectFit" class="icon" />
						</template>
					</Option>
					<Option title="群聊" @submit="sendGroup">
						<template #icon>
							<image src="../../static/imgs/群聊.svg" mode="aspectFit" class="icon" />
						</template>
					</Option>
					<Option title="关注" @submit="sendGuanzhu">
						<template #icon>
							<image src="../../static/imgs/关注.svg" mode="aspectFit" class="icon" />
						</template>
					</Option>
				</view>
				<AddressBookItem :id="item.title" v-for="item,index in arr" :key="index" :title="item.title"
					:userInfo="item.userInfo" />
			</scroll-view>
		</view>
		<Tabbar :current="2" />
	</view>
</template>

<script setup>
	import Tabbar from '@/components/tabbar/tabbar.vue';
	import Search from '@/components/search/search.vue';
	import Option from '@/components/common/option.vue';
	import AddressBookItem from '@/components/address-books/address-book-item.vue'
	import {
		getAddressBooks
	} from '@/hooks/pinyin.js'
	import {
		ref,
		onMounted,
		provide
	} from 'vue';
	provide("checked",[])
	provide("isSelect",false)
	const move = ref("Q")
	const arr = ref([])
	const userInfo = ref([{
		id: 1,
		avatar: "../../static/logo.png",
		username: "Alan"
	}, {
		id: 2,
		avatar: "../../static/logo.png",
		username: "2爱情"
	}, {
		id: 3,
		avatar: "../../static/logo.png",
		username: "1其实"
	}, {
		id: 4,
		avatar: "../../static/logo.png",
		username: "Vlan2"
	}, {
		id: 5,
		avatar: "../../static/logo.png",
		username: "Xlan2"
	}, {
		id: 6,
		avatar: "../../static/logo.png",
		username: "Qlan2"
	}, {
		id: 7,
		avatar: "../../static/logo.png",
		username: "Qlan2"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}])

	/**
	 * 新的朋友
	 */
	function sendNew() {
		console.log("新的朋友")
	}

	/**
	 * 群聊
	 */
	function sendGroup() {
		console.log("群聊")
	}

	/**
	 * 关注
	 */
	function sendGuanzhu() {
		console.log("关注")
	}
	onMounted(() => {
		getAddressBooks(userInfo, arr)
	})
</script>

<style lang="scss" scoped>
	.address-book {
		height: 100%;

		&__body {
			height: calc(100% - 100upx);

			&--header {
				margin-top: 20upx;

				:deep(.query-chat) {
					margin: 0;
					padding: 20upx;
				}

				.icon {
					width: 60upx;
					height: 60upx;
					margin-right: 20upx;
				}
			}
		}
	}
</style>